<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清晰账本 - 我的</title>
    <link rel="stylesheet" href="glassmorphism.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            min-height: 100vh;
            color: #fff;
            padding-bottom: 80px;
        }
        
        .app-container {
            max-width: 480px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .page-title {
            font-size: 22px;
            font-weight: bold;
        }
        
        .user-profile {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
        }
        
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
        }
        
        .profile-avatar i {
            font-size: 40px;
        }
        
        .profile-info {
            flex: 1;
        }
        
        .profile-name {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .profile-subtitle {
            font-size: 14px;
            opacity: 0.7;
        }
        
        .menu-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            margin-bottom: 25px;
            overflow: hidden;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 18px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }
        
        .menu-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        
        .menu-text {
            flex: 1;
            font-size: 16px;
        }
        
        .menu-arrow {
            opacity: 0.5;
        }
        
        .category-manager {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            z-index: 1000;
            display: none;
            flex-direction: column;
            padding: 20px;
            overflow-y: auto;
        }
        
        .manager-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }
        
        .back-button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: absolute;
            left: 0;
            cursor: pointer;
        }
        
        .manager-title {
            flex: 1;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        
        .add-category-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: absolute;
            right: 0;
            cursor: pointer;
        }
        
        .category-tabs {
            display: flex;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .category-tab {
            flex: 1;
            text-align: center;
            padding: 15px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .category-tab.active {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .category-list {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            overflow: hidden;
        }
        
        .category-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .category-item:last-child {
            border-bottom: none;
        }
        
        .category-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        
        .category-name {
            flex: 1;
        }
        
        .category-actions {
            display: flex;
        }
        
        .category-edit, .category-delete {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            margin-left: 10px;
            cursor: pointer;
        }
        
        .category-delete {
            background: rgba(255, 94, 98, 0.2);
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 1100;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            width: 90%;
            max-width: 320px;
            background: rgba(35, 35, 35, 0.95);
            backdrop-filter: blur(15px);
            border-radius: 15px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .modal-header {
            margin-bottom: 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            margin-bottom: 8px;
            opacity: 0.8;
        }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 16px;
        }
        
        .icon-selector {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        
        .icon-option {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .icon-option.active {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .modal-actions {
            display: flex;
            justify-content: space-between;
        }
        
        .modal-button {
            flex: 1;
            padding: 12px;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            font-size: 16px;
            margin: 0 5px;
        }
        
        .cancel-button {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .save-button {
            background: rgba(38, 222, 129, 0.2);
        }
        
        .delete-button {
            background: rgba(255, 94, 98, 0.2);
        }
        
        .toast {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(38, 222, 129, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            padding: 15px 20px;
            color: white;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1200;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        .toast.error {
            background: rgba(255, 94, 98, 0.2);
        }
        
        .navigation {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .nav-item.active {
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="header">
            <div class="page-title">我的</div>
        </div>
        
        <div class="user-profile">
            <div class="profile-avatar">
                <i class="material-icons">person</i>
            </div>
            <div class="profile-info">
                <div class="profile-name">用户名</div>
                <div class="profile-subtitle">记录每一笔，规划好未来</div>
            </div>
        </div>
        
        <div class="menu-card">
            <div class="menu-item" onclick="openCategoryManager()">
                <div class="menu-icon">
                    <i class="material-icons">category</i>
                </div>
                <div class="menu-text">分类管理</div>
                <div class="menu-arrow">
                    <i class="material-icons">chevron_right</i>
                </div>
            </div>
            <div class="menu-item" onclick="window.location.href='savings_management.html'">
                <div class="menu-icon">
                    <i class="material-icons">savings</i>
                </div>
                <div class="menu-text">储蓄管理</div>
                <div class="menu-arrow">
                    <i class="material-icons">chevron_right</i>
                </div>
            </div>
            <div class="menu-item" onclick="window.location.href='savings_goals.html'">
                <div class="menu-icon">
                    <i class="material-icons">flag</i>
                </div>
                <div class="menu-text">储蓄目标设置</div>
                <div class="menu-arrow">
                    <i class="material-icons">chevron_right</i>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="material-icons">backup</i>
                </div>
                <div class="menu-text">数据备份</div>
                <div class="menu-arrow">
                    <i class="material-icons">chevron_right</i>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="material-icons">settings</i>
                </div>
                <div class="menu-text">应用设置</div>
                <div class="menu-arrow">
                    <i class="material-icons">chevron_right</i>
                </div>
            </div>
        </div>
        
        <div class="menu-card">
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="material-icons">info</i>
                </div>
                <div class="menu-text">关于应用</div>
                <div class="menu-arrow">
                    <i class="material-icons">chevron_right</i>
                </div>
            </div>
            <div class="menu-item">
                <div class="menu-icon">
                    <i class="material-icons">help</i>
                </div>
                <div class="menu-text">常见问题</div>
                <div class="menu-arrow">
                    <i class="material-icons">chevron_right</i>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 分类管理页面 -->
    <div class="category-manager" id="categoryManager">
        <div class="manager-header">
            <div class="back-button" onclick="closeCategoryManager()">
                <i class="material-icons">arrow_back</i>
            </div>
            <div class="manager-title">分类管理</div>
            <div class="add-category-btn" onclick="openAddCategoryModal()">
                <i class="material-icons">add</i>
            </div>
        </div>
        
        <div class="category-tabs">
            <div class="category-tab active" data-type="expense" onclick="switchCategoryTab('expense')">支出分类</div>
            <div class="category-tab" data-type="income" onclick="switchCategoryTab('income')">收入分类</div>
        </div>
        
        <div class="category-list" id="categoryList">
            <!-- 分类列表将通过JavaScript动态填充 -->
        </div>
    </div>
    
    <!-- 新增/编辑分类模态框 -->
    <div class="modal" id="categoryModal">
        <div class="modal-content">
            <div class="modal-header" id="modalTitle">添加分类</div>
            
            <div class="form-group">
                <label class="form-label">分类名称</label>
                <input type="text" class="form-input" id="categoryNameInput" placeholder="请输入分类名称">
            </div>
            
            <div class="form-group">
                <label class="form-label">选择图标</label>
                <div class="icon-selector" id="iconSelector">
                    <!-- 图标选项将通过JavaScript动态填充 -->
                </div>
            </div>
            
            <div class="modal-actions">
                <div class="modal-button cancel-button" onclick="closeModal()">取消</div>
                <div class="modal-button save-button" id="saveCategoryBtn" onclick="saveCategory()">保存</div>
            </div>
        </div>
    </div>
    
    <!-- 删除确认模态框 -->
    <div class="modal" id="deleteModal">
        <div class="modal-content">
            <div class="modal-header">删除分类</div>
            <p style="margin-bottom: 20px; text-align: center;">确定要删除此分类吗？</p>
            
            <div class="modal-actions">
                <div class="modal-button cancel-button" onclick="closeDeleteModal()">取消</div>
                <div class="modal-button delete-button" onclick="confirmDeleteCategory()">删除</div>
            </div>
        </div>
    </div>
    
    <div class="toast" id="toast">操作成功</div>
    
    <div class="navigation">
        <a href="index.html" class="nav-item">
            <i class="material-icons">home</i>
            <span>首页</span>
        </a>
        <a href="transactions.html" class="nav-item">
            <i class="material-icons">receipt_long</i>
            <span>交易</span>
        </a>
        <a href="statistics.html" class="nav-item">
            <i class="material-icons">pie_chart</i>
            <span>统计</span>
        </a>
        <a href="my_profile.html" class="nav-item active">
            <i class="material-icons">person</i>
            <span>我的</span>
        </a>
    </div>
    
    <script src="app_data.js"></script>
    <script src="mock_data.js"></script>
    <script>
        // 全局变量
        let currentCategoryType = 'expense';
        let editingCategoryId = null;
        let selectedIcon = null;
        let deletingCategoryId = null;
        
        // 预定义图标
        const availableIcons = [
            'restaurant', 'shopping_cart', 'directions_bus', 'home', 
            'sports_esports', 'local_hospital', 'school', 'more_horiz',
            'work', 'card_giftcard', 'savings', 'schedule', 'pets',
            'fitness_center', 'flight', 'phone', 'movie', 'business',
            'laptop', 'spa', 'local_cafe', 'wine_bar', 'beach_access'
        ];
        
        // 初始化页面
        function initPage() {
            // 初始化模拟数据
            if (window.MockData) {
                window.MockData.initializeMockData();
            }
            
            renderIconSelector();
        }
        
        // 打开分类管理器
        function openCategoryManager() {
            document.getElementById('categoryManager').style.display = 'flex';
            renderCategoryList();
        }
        
        // 关闭分类管理器
        function closeCategoryManager() {
            document.getElementById('categoryManager').style.display = 'none';
        }
        
        // 切换分类标签
        function switchCategoryTab(type) {
            currentCategoryType = type;
            
            // 更新UI
            const tabs = document.querySelectorAll('.category-tab');
            tabs.forEach(tab => {
                if (tab.dataset.type === type) {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });
            
            // 重新渲染分类列表
            renderCategoryList();
        }
        
        // 渲染分类列表
        function renderCategoryList() {
            const categoryListElement = document.getElementById('categoryList');
            const categories = currentCategoryType === 'expense' ? 
                window.AppData.expenseCategories : window.AppData.incomeCategories;
            
            let html = '';
            
            categories.forEach(category => {
                html += `
                    <div class="category-item">
                        <div class="category-icon">
                            <i class="material-icons">${category.icon}</i>
                        </div>
                        <div class="category-name">${category.name}</div>
                        <div class="category-actions">
                            <div class="category-edit" onclick="editCategory('${category.id}')">
                                <i class="material-icons">edit</i>
                            </div>
                            <div class="category-delete" onclick="deleteCategory('${category.id}')">
                                <i class="material-icons">delete</i>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            categoryListElement.innerHTML = html;
        }
        
        // 打开添加分类模态框
        function openAddCategoryModal() {
            document.getElementById('modalTitle').textContent = '添加分类';
            document.getElementById('categoryNameInput').value = '';
            editingCategoryId = null;
            selectedIcon = null;
            
            // 清除所有选中状态
            document.querySelectorAll('.icon-option').forEach(option => {
                option.classList.remove('active');
            });
            
            // 显示模态框
            document.getElementById('categoryModal').style.display = 'flex';
        }
        
        // 打开编辑分类模态框
        function editCategory(categoryId) {
            const categories = currentCategoryType === 'expense' ? 
                window.AppData.expenseCategories : window.AppData.incomeCategories;
            
            const category = categories.find(c => c.id === categoryId);
            if (!category) return;
            
            document.getElementById('modalTitle').textContent = '编辑分类';
            document.getElementById('categoryNameInput').value = category.name;
            editingCategoryId = categoryId;
            selectedIcon = category.icon;
            
            // 设置选中的图标
            document.querySelectorAll('.icon-option').forEach(option => {
                if (option.dataset.icon === category.icon) {
                    option.classList.add('active');
                } else {
                    option.classList.remove('active');
                }
            });
            
            // 显示模态框
            document.getElementById('categoryModal').style.display = 'flex';
        }
        
        // 关闭模态框
        function closeModal() {
            document.getElementById('categoryModal').style.display = 'none';
        }
        
        // 保存分类
        function saveCategory() {
            const name = document.getElementById('categoryNameInput').value.trim();
            
            // 验证
            if (!name) {
                showToast('请输入分类名称', true);
                return;
            }
            
            if (!selectedIcon) {
                showToast('请选择图标', true);
                return;
            }
            
            // 获取分类列表
            let categories = currentCategoryType === 'expense' ? 
                [...window.AppData.expenseCategories] : [...window.AppData.incomeCategories];
            
            if (editingCategoryId) {
                // 编辑现有分类
                const index = categories.findIndex(c => c.id === editingCategoryId);
                if (index !== -1) {
                    categories[index] = {
                        ...categories[index],
                        name: name,
                        icon: selectedIcon
                    };
                }
            } else {
                // 添加新分类
                const newCategory = {
                    id: Date.now().toString(36),
                    name: name,
                    icon: selectedIcon
                };
                
                categories.push(newCategory);
            }
            
            // 更新存储
            if (currentCategoryType === 'expense') {
                window.AppData.expenseCategories = categories;
            } else {
                window.AppData.incomeCategories = categories;
            }
            
            // 更新本地存储
            const storageManager = new window.AppData.StorageManager();
            const data = storageManager.getData();
            if (currentCategoryType === 'expense') {
                data.expenseCategories = categories;
            } else {
                data.incomeCategories = categories;
            }
            storageManager.saveData(data);
            
            // 关闭模态框
            closeModal();
            
            // 重新渲染分类列表
            renderCategoryList();
            
            // 显示成功提示
            showToast(editingCategoryId ? '分类已更新' : '分类已添加');
        }
        
        // 删除分类
        function deleteCategory(categoryId) {
            deletingCategoryId = categoryId;
            document.getElementById('deleteModal').style.display = 'flex';
        }
        
        // 关闭删除模态框
        function closeDeleteModal() {
            document.getElementById('deleteModal').style.display = 'none';
            deletingCategoryId = null;
        }
        
        // 确认删除分类
        function confirmDeleteCategory() {
            if (!deletingCategoryId) return;
            
            // 获取分类列表
            let categories = currentCategoryType === 'expense' ? 
                [...window.AppData.expenseCategories] : [...window.AppData.incomeCategories];
            
            // 移除分类
            categories = categories.filter(c => c.id !== deletingCategoryId);
            
            // 更新存储
            if (currentCategoryType === 'expense') {
                window.AppData.expenseCategories = categories;
            } else {
                window.AppData.incomeCategories = categories;
            }
            
            // 更新本地存储
            const storageManager = new window.AppData.StorageManager();
            const data = storageManager.getData();
            if (currentCategoryType === 'expense') {
                data.expenseCategories = categories;
            } else {
                data.incomeCategories = categories;
            }
            storageManager.saveData(data);
            
            // 关闭模态框
            closeDeleteModal();
            
            // 重新渲染分类列表
            renderCategoryList();
            
            // 显示成功提示
            showToast('分类已删除');
        }
        
        // 渲染图标选择器
        function renderIconSelector() {
            const iconSelectorElement = document.getElementById('iconSelector');
            
            let html = '';
            availableIcons.forEach(icon => {
                html += `
                    <div class="icon-option" data-icon="${icon}" onclick="selectIcon('${icon}')">
                        <i class="material-icons">${icon}</i>
                    </div>
                `;
            });
            
            iconSelectorElement.innerHTML = html;
        }
        
        // 选择图标
        function selectIcon(icon) {
            selectedIcon = icon;
            
            // 更新UI
            const iconOptions = document.querySelectorAll('.icon-option');
            iconOptions.forEach(option => {
                if (option.dataset.icon === icon) {
                    option.classList.add('active');
                } else {
                    option.classList.remove('active');
                }
            });
        }
        
        // 显示提示
        function showToast(message, isError = false) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            
            if (isError) {
                toast.classList.add('error');
            } else {
                toast.classList.remove('error');
            }
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>
</html> 